<template>
  <div class="d_main not">
    <div class="d_header">
      <div class="d_header_title">
        <div class="back pointer" @click="handleBack">
          <span class="el-icon-arrow-left"></span>
          <p>返回</p>
        </div>
        <h3>产品详情</h3>
      </div>
      <div class="d_header_btn">
        <el-button
          type="primary"
          size="small"
          @click="handleSave"
          v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
          >仅保存</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="handleSave('confirm')"
          v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
          >保存并确认</el-button
        >
      </div>
    </div>
    <div class="d_mainCenter">
      <div class="order_info">
        <div class="title pl0">
          <h3>订单信息</h3>
        </div>
        <el-form
          ref="formModels"
          :model="formModel"
          :rules="rules"
          :disabled="isDisable"
          label-width="130px"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="订单单号:">
                <el-input
                  v-model="formModel.saleOrderGroupNumber"
                  placeholder="系统自动生成"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户名称:" prop="customerCode">
                <el-select
                  v-model="formModel.customerCode"
                  placeholder="请选择客户名称"
                  clearable
                  filterable
                  style="border: none"
                  size="small"
                >
                  <el-option
                    v-for="item in customerList"
                    :key="item.customerCode"
                    :label="item.customerName"
                    :value="item.customerCode"
                    @click.native="handleCustomerNameChange(item.customerCode)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单折扣:">
                <el-select
                  v-model="formModel.discountType"
                  placeholder="请选择折扣"
                  clearable
                  filterable
                  size="small"
                  @change="calculationDiscount"
                >
                  <el-option
                    v-for="item in discountList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="$route.query.hasEditPower">
            <el-col :span="8">
              <el-form-item label="订单金额:">
                <el-input
                  v-model="formModel.orderTotalAmount"
                  placeholder="自动计算"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣金额:">
                <el-input
                  v-model="formModel.discountAmount"
                  placeholder="自动计算"
                  size="small"
                  @blur="handleBlurDiscount"
                  :disabled="formModel.discountType != 4"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际金额:">
                <el-input
                  v-model="formModel.actualAmount"
                  placeholder="自动计算"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="order_info" v-if="formModel.saleOrderList.length>0 && $route.query.type == 'add' || $route.query.type == 'edit'">
        <div class="title pl0">
          <h3>批量填写</h3>
        </div>
        <el-form
          ref="batchForm"
          :model="batchForm"
          :rules="rules"
          :disabled="isDisable"
          label-width="130px"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="客户单号:">
                <el-input
                      v-model="batchForm.customerBillNo"
                      placeholder="请输入内容"
                      @blur="batchAssignment"
                      size="small"
                    />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交货日期:">
                <el-date-picker
                    v-model="batchForm.deliveryDate"
                    type="date"
                    size="small"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    @change="batchAssignment"
                  >
                  </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单合同:">
                <el-input
                      disabled
                      v-model="batchForm.contractName"
                      placeholder="请上传合同"
                      size="small"
                    >
                      <el-upload
                        class="avatar-uploader"
                        action=" "
                        :show-file-list="false"
                        :http-request="
                          (file) => {
                            return handleBatchContractUpload(file);
                          }
                        "
                        slot="append"
                      >
                        <el-button class="el-icon-upload2" :disabled="isDisable"
                          >上传</el-button
                        >
                      </el-upload>
                    </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="数据来源:">
                <el-select
                    v-model="batchForm.dataComeFrom"
                    @change="batchAssignment"
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option label="无" :value="0"> </el-option>
                    <el-option label="客户" :value="1"> </el-option>
                    <el-option label="自编" :value="2"> </el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="生产数量:">
                <el-input
                  v-model="batchForm.productionQuantity"
                  placeholder="请输入生产数量"
                  @blur="batchAssignment"
                  size="small"
                />
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </div>
      <div class="product_info">
        <div class="title pl0">
          <h3>产品信息</h3>
          <el-link type="primary" :underline="false" @click="handleRecalculate"><i class="el-icon-refresh pr6"></i>重算单价</el-link>
        </div>
        <div class="product_list">
          <div
            class="list_item"
            v-for="(item, index) in formModel.saleOrderList"
            :key="index"
          >
            <div class="head">
              <span>协议书号：{{ item.xieYiShuHao || "系统自动生成" }}</span>
              <el-button
                v-if="!isDisable"
                type="text"
                @click="handleDeleteProductRow(index)"
                >删除</el-button
              >
            </div>
            <div class="content">
              <div class="content_left">
                <div class="product_item_info">
                  <div class="product_img">
                    <img
                      :src="
                        item.productColorDraftFileList.length > 0
                          ? item.productColorDraftFileList[0].draftFileUrl
                          : ''
                      "
                      alt=""
                    />
                  </div>
                  <div class="product_detail">
                    <h3 class="mb6">{{ item.orderProduct.productName }}</h3>
                    <p>
                      <span class="key"
                        >产品编号:<span class="val">{{
                          item.orderProduct.productNumber
                        }}</span></span
                      >
                    </p>
                    <p>
                      <span class="key"
                        >产品类型:<span class="val">{{
                          item.orderProduct.productTypeName
                        }}</span></span
                      >
                    </p>
                    <p>
                      <span class="key"
                        >版本版面:<span class="val">{{
                          "V" +
                          (item.orderProduct.updateVersion+1) +
                          "【" +
                          item.orderProduct.productLayout +
                          "】"
                        }}</span></span
                      >
                    </p>
                    <p>
                      <span class="key"
                        >产品尺寸:<span class="val">{{
                          item.orderProduct.productSize
                        }}</span></span
                      >
                    </p>
                    <p>
                      <span class="key"
                        >标签数量:<span class="val">{{
                          item.orderProduct.productTagNumber
                        }}</span></span
                      >
                    </p>
                    <p v-if="$route.query.hasEditPower">
                      <span class="key"
                        >产品单价:<span class="val"
                          >{{ item.orderProduct.productPrice }}元</span
                        ></span
                      >
                    </p>
                    <p>
                      <span class="key"
                        >产品要求:<span class="val">{{
                          item.orderProduct.productRequirement
                        }}</span></span
                      >
                    </p>
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="product_detail_list">
                  <div class="detail_head">
                    <div @click="isOpenDetail = !isOpenDetail">
                      <i
                        class="el-icon-arrow-right pr6"
                        v-if="!isOpenDetail"
                      ></i>
                      <i class="el-icon-arrow-down pr6" v-else></i>明细数量:{{
                        item.orderProductSpecificationList.length
                      }}
                    </div>
                    <div class="flex" v-if="!isDisable">
                      <el-button
                        icon="el-icon-download"
                        size="small"
                        class="mr8"
                        @click="handleDownload"
                        >下载模板</el-button
                      >
                      <el-upload
                        class="upload-demo"
                        action="#"
                        multiple
                        :show-file-list="false"
                        :http-request="
                          (file) => {
                            return myUpload(
                              item.orderProduct.productCode,
                              index,
                              file
                            );
                          }
                        "
                      >
                        <el-button
                          icon="el-icon-upload2"
                          size="small"
                          type="primary"
                          >上传型号</el-button
                        >
                      </el-upload>
                    </div>
                  </div>
                  <el-table
                    :data="item.orderProductSpecificationList"
                    v-if="isOpenDetail"
                    border
                    style="width: 100%"
                    :row-key="(row) => row.rowKey"
                  >
                    <el-table-column type="index" label="序号" width="50" />
                    <el-table-column
                      prop="productSpecificationName"
                      width="220"
                      align="center"
                      label="型号名称"
                    >
                      <template slot-scope="scope">
                        <customInput
                          v-model="scope.row.productSpecificationCode"
                          :disabled="isDisable"
                          :label="scope.row.productSpecificationName"
                          :sourceData="item.productSpecificationList"
                          @childValueChange="
                            productSpecificationChange(
                              scope.row,
                              index,
                              scope.$index,
                              $event
                            )
                          "
                          @handleSaveSelect="
                            handleSaveProductModel(index, scope.$index, $event)
                          "
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="productionQuantity"
                      width="150"
                      align="center"
                      label="生产数量"
                    >
                      <template slot-scope="scope">
                        <el-input
                          v-model.number="scope.row.productionQuantity"
                          placeholder="请输入内容"
                          size="small"
                          :disabled="isDisable"
                          @blur="getProductNumber(index, scope.$index)"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-if="$route.query.type != 'see'"
                      prop="stockQuantity"
                      width="150"
                      align="center"
                      label="闲置库存"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="deliveredQuantity"
                      width="150"
                      align="center"
                      label="已发货数量"
                      v-if="$route.query.type == 'see'"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="materialType"
                      width="150"
                      align="center"
                      label="待发货数量"
                      v-if="$route.query.type == 'see'"
                    >
                      <template slot-scope="{ row }">
                        <div>
                          {{ row.productionQuantity - row.deliveredQuantity }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="remark" align="center" label="备注">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.remark"
                          :disabled="isDisable"
                          placeholder="请输入内容"
                          size="small"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      width="100px"
                      fixed="right"
                      align="center"
                      v-if="
                        $route.query.type == 'add' ||
                        $route.query.type == 'edit'
                      "
                    >
                      <template slot-scope="scope">
                        <el-button
                          type="text"
                          @click="handleCopyRow(scope.row, scope.$index, index)"
                          v-if="
                            scope.$index !=
                            item.orderProductSpecificationList.length - 1
                          "
                          >复制</el-button
                        >
                        <el-button
                          type="text"
                          @click="
                            handleDeleteRow(scope.row, scope.$index, index)
                          "
                          v-if="
                            scope.$index !=
                            item.orderProductSpecificationList.length - 1
                          "
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="content_right">
                <el-form
                  ref="formModel"
                  :model="item"
                  :rules="rules"
                  :disabled="isDisable"
                  label-width="130px"
                >
                  <el-form-item label="客户单号:">
                    <el-input
                      v-model="item.customerBillNo"
                      placeholder="请输入内容"
                      size="small"
                    />
                  </el-form-item>
                  <el-form-item label="交货日期:" prop="deliveryDate">
                    <el-date-picker
                      v-model="item.deliveryDate"
                      type="date"
                      size="small"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="订单合同:">
                    <el-input
                      disabled
                      v-model="item.contractName"
                      placeholder="请上传合同"
                      size="small"
                    >
                      <el-upload
                        class="avatar-uploader"
                        action=" "
                        :show-file-list="false"
                        :http-request="
                          (file) => {
                            return handleContractUpload(index, file);
                          }
                        "
                        slot="append"
                      >
                        <el-button class="el-icon-upload2" :disabled="isDisable"
                          >上传</el-button
                        >
                      </el-upload>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="产品数量:">
                    <el-input
                      v-model="item.productQuantity"
                      disabled
                      placeholder="请输入内容"
                      size="small"
                    />
                  </el-form-item>
                  <el-form-item label="产品版面:" prop="productLayout">
                    <el-select
                      v-model="item.productLayout"
                      size="small"
                      placeholder="请选择"
                    >
                      <el-option label="新版" value="新版"></el-option>
                      <el-option label="改版" value="改版"></el-option>
                      <el-option label="老版" value="老版"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="数据来源:" prop="dataComeFrom">
                    <el-select
                      v-model="item.dataComeFrom"
                      size="small"
                      placeholder="请选择"
                    >
                      <el-option label="无" :value="0"> </el-option>
                      <el-option label="客户" :value="1"> </el-option>
                      <el-option label="自编" :value="2"> </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="数据数量:">
                    <el-input
                      v-model.number="item.dataQuantity"
                      placeholder="请输入内容"
                      size="small"
                    />
                  </el-form-item>
                  <el-form-item label="数据状态:" v-if="$route.query.type == 'see'">
                    <el-input
                      v-model="item.dataBillStateName"
                      placeholder="请输入内容"
                      size="small"
                    />
                  </el-form-item>
                  <el-form-item label="订单备注:">
                    <el-input
                      v-model="item.remark"
                      placeholder="请输入内容"
                      size="small"
                      type="textarea"
                      :rows="3"
                    />
                  </el-form-item>
                  <el-form-item label="小计:" v-if="$route.query.hasEditPower">
                    <el-input
                      v-model.number="item.totalAmount"
                      @input="handleTotalAmount(item)"
                      placeholder="请输入内容"
                      size="small"
                    />
                    <!-- <span style="color: red"> {{ item.totalAmount }}元 </span> -->
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-button
        plain
        style="width: 100%; margin-top: 5px"
        icon="el-icon-search"
        size="small"
        v-if="$route.query.type == 'add' || $route.query.type == 'edit'"
        @click="handleShowProductList"
      >
        选择产品</el-button
      >
      <div
        class="mt10"
        style="display: flex"
        v-if="$route.query.orderType == 2"
      >
        <div style="width: 80px">作废原因:</div>
        <el-input
          v-model="formModel.disabledReason"
          :disabled="isDisable"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          size="small"
        />
      </div>

      <div
        class="mt10"
        style="display: flex"
        v-if="$route.query.orderType == 3"
      >
        <div style="width: 80px">撤单原因:</div>
        <el-input
          v-model="formModel.cancelReason"
          :disabled="isDisable"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          size="small"
        />
      </div>

      <el-dialog
        title="选择产品"
        :visible.sync="isShowProductModel"
        :close-on-click-modal="false"
        custom-class="comDialog"
        width="80%"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <div class="query_region">
          <el-input
            placeholder="请输入内容"
            v-model="search.likeWords"
            class="input-with-select"
            size="small"
          >
            <template #prepend>
              <el-select
                v-model="search.queryDataBaseFiled"
                placeholder="请选择"
                size="small"
                v-if="tableHead.length > 0"
              >
                <el-option
                  :label="item.columnName"
                  :value="item.columnCode"
                  v-for="item in tableHead"
                  :key="item.columnCode"
                ></el-option>
              </el-select>
            </template>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleProductSearch"
            ></el-button>
          </el-input>
        </div>
        <div class="product_lists">
          <div class="list list_5 p16">
            <div
              class="list-item"
              v-for="(item, index) in productList"
              :key="index"
              @click="handleProductItem(item, index)"
            >
              <div class="product_list_img">
                <img
                  v-if="item.productColorDraftFileList.length > 0"
                  :src="
                    item.productColorDraftFileList.length > 0
                      ? item.productColorDraftFileList[0].draftFileUrl
                      : ''
                  "
                  alt=""
                />
                <el-empty v-else description="暂无图片"></el-empty>
              </div>
              <div class="product_list_info">
                <h3>
                  {{ item.productName }}
                </h3>
                <p>
                  产品编号:<span>{{ item.productNumber }}</span>
                </p>
                <p>
                  产品类型:<span>{{ item.productTypeName }}</span>
                </p>
                <p>
                  版本版面:<span>{{ item.productVersion }}</span><span>{{ item.productLayout }}</span>
                </p>
                <p>
                  产品尺寸:<span>{{ item.productSize }}</span>
                </p>
                <p>
                  标签数量:<span>{{ item.productTagNumber }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <pagination
          v-if="search.pageIndex"
          :total="search.total || 0"
          :page.sync="search.pageIndex"
          :limit.sync="search.pageSize"
          @pagination="getProductList"
        />
      </el-dialog>
    </div>
  </div>
</template>
        <script>
import { mapGetters } from "vuex";
import customInput from "@/components/customInput";
import Pagination from "@/components/Pagination";
import { arraySort, formatDate } from "@/utils";
export default {
  name: "productionOrderNewDetail",
  components: {
    Pagination,
    customInput,
  },
  computed: {
    ...mapGetters(["userInfo", "name"]),
  },
  data() {
    return {

      batchForm:{
        customerBillNo:'',
        deliveryDate:'',
        contractName:'',
        dataComeFrom:'',
        productionQuantity:''
      },

      isShowProductModel: false, //产品列表弹出层状态
      isDisable: false,
      isOpenDetail: true,
      showImport: false,
      formModel: {
        saleOrderGroupNumber: "",
        customerCode: "",
        orderTotalAmount: 0,
        discountType: 0,
        discountAmount: 0,
        actualAmount: 0,
        saleOrderList: [],
      },

      temModel: {
        customerCode: "",
      },
      rules: {
        customerCode: [
          {
            required: true,
            message: "请选择客户名称",
            trigger: "change",
          },
        ],
        dataComeFrom: [
          {
            required: true,
            message: "请选择数据来源",
            trigger: "change",
          },
        ],
        deliveryDate: [
          {
            required: true,
            message: "请选择交货日期",
            trigger: "change",
          },
        ],
        productLayout: [
          {
            required: true,
            message: "请选择产品版面",
            trigger: "change",
          },
        ],
      },
      customerList: [], //客户列表
      productList: [], //产品列表
      listLoading: false, //加载
      // 产品列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 20,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 0,
        state: 0,
        customerCode: "",
      },

      tableHead: [], //产品表头

      productModelForm: {
        productSpecificationID: 0,
        productSpecificationCode: "",
        productCode: "",
        productSpecificationNumber: "",
        productSpecificationName: "",
        isDisable: 0,
        remark: "",
      }, //成品型号保存参数
      batchFormCopy:{},

      discountList: [
        {
          label: "无折扣",
          value: 0,
        },
        {
          label: "抹元",
          value: 1,
        },
        {
          label: "抹角",
          value: 2,
        },
        {
          label: "抹分",
          value: 3,
        },
        {
          label: "自定义",
          value: 4,
        },
      ], //折扣
    };
  },
  created() {
    //获取客户列表
    this.getQueryPageCustomerList();
    if (this.$route.query.type == "add") {
      this.isDisable = false;
    } else if (this.$route.query.type == "edit") {
      this.isDisable = false;
      this.getDetail(this.$route.query.saleOrderGroupCode);
    } else if (this.$route.query.type == "see") {
      this.isDisable = true;
      this.getDetail(this.$route.query.saleOrderGroupCode);
    }
  },
  mounted() {
    this.batchFormCopy = JSON.parse(JSON.stringify(this.batchForm))
  },
  methods: {
    // 获取客户列表
    getQueryPageCustomerList() {
      const cusSearch = {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        IsEnabled:1,
        pageIndex: 1,
        pageSize: 9999,
      };
      this.$api.business.QueryPageCustomerList(cusSearch).then((res) => {
        this.customerList = res.list;
      });
    },

    //复制明细行
    handleCopyRow(row, index, rowIndex) {
      this.formModel.saleOrderList[
        rowIndex
      ].orderProductSpecificationList.splice(
        index,
        0,
        JSON.parse(JSON.stringify(row))
      );
      this.formModel.saleOrderList[rowIndex].totalAmount =
        this.formModel.saleOrderList[rowIndex].orderProduct.productPrice *
        (this.formModel.saleOrderList[rowIndex].orderProductSpecificationList
          .length -
          1);
      this.formModel.saleOrderList[rowIndex].totalAmount = JSON.parse(
        this.formModel.saleOrderList[rowIndex].totalAmount.toFixed(4)
      );
      this.getOrderPrice();
    },

    //删除明细行
    handleDeleteRow(row, index, rowIndex) {
      // this.formModel.saleOrderList[
      //   rowIndex
      // ].orderProductSpecificationList.forEach((k,i)=>{
      //   // k.rowKey = i
      //   this.$set(k,'rowKey',i)
      // })
      this.formModel.saleOrderList[
        rowIndex
      ].orderProductSpecificationList.splice(index, 1);

      //计算小计
      this.formModel.saleOrderList[rowIndex].totalAmount =
        this.formModel.saleOrderList[rowIndex].orderProduct.productPrice *
        (this.formModel.saleOrderList[rowIndex].orderProductSpecificationList
          .length -
          1);
      this.formModel.saleOrderList[rowIndex].totalAmount = JSON.parse(
        this.formModel.saleOrderList[rowIndex].totalAmount.toFixed(4)
      );
      this.getOrderPrice();
      this.getProductNumber(rowIndex, index, "delete");
      this.$forceUpdate();
    },

    //删除产品信息
    handleDeleteProductRow(index) {
      this.formModel.saleOrderList.splice(index, 1);
      this.getOrderPrice();
    },

    //选择产品点击事件
    handleProductItem(item, index) {
      this.listLoading = true;
      const parmas = {
        queryBy: 0,
        queryValue: item.productCode,
      };
      this.$api.business.GetSingleProductByProductCode(parmas).then((res) => {
        res.productSpecificationList.forEach((item) => {
          item.label = item.productSpecificationName;
          item.value = item.productSpecificationCode;
        });
        this.formModel.saleOrderList.push({
          productCode: res.baseData.productCode,
          customerBillNo: "",
          deliveryDate: "",
          productQuantity: 0,
          dataComeFrom: "",
          dataQuantity: 0,
          remark: "",
          unitPrice: 0,
          totalAmount: 0,
          contractName: "",
          contractFile: "",
          orderProduct: res.baseData,
          initMoney: res.baseData.productPrice,
          productSpecificationList: res.productSpecificationList,
          productSteppedPriceInfoList: res.productSteppedPriceInfoList,
          productColorDraftFileList: res.productColorDraftFileList,
          orderProductSpecificationList: [
            {
              orderProductSpecificationID: 0,
              orderProductSpecificationCode: "",
              productSpecificationCode: "",
              productCode: res.baseData.productCode,
              productSpecificationNumber: "",
              productSpecificationName: "",
              isDisable: 0,
              remark: "",
              productionQuantity: 0,
            },
          ],
        });
        this.getOrderPrice();
        console.log(res.productSpecificationList);
        this.isShowProductModel = false;
      });
    },

    //客户名称选择事件
    handleCustomerNameChange(data) {
      if (this.formModel.saleOrderList.length > 0) {
        if (this.temModel.customerCode) {
          this.formModel.customerCode = this.temModel.customerCode;
        }
        this.$confirm("切换客户名称将会清空产品数据,是否继续?", "提示", {
          confirmButtonText: "是",
          cancelButtonText: "否",
          type: "warning",
        })
          .then(() => {
            this.formModel.customerCode = data;
            this.temModel.customerCode = JSON.parse(JSON.stringify(data));
            this.formModel.saleOrderList = [];
            this.getOrderPrice();
          })
          .catch(() => {});
      }
      console.log(this.formModel.customerCode);
      // this.temModel.customerCode = JSON.parse(JSON.stringify(data));
    },

    //小计输入事件
    handleTotalAmount(row){
      if(!row.totalAmount){
        row.totalAmount = row.orderProduct.productPrice*row.productQuantity
      }
    },

    //获取生产数量
    getProductNumber(index, rowIndex, type) {
      this.formModel.saleOrderList[index].productQuantity = 0;
      this.formModel.saleOrderList[index].orderProductSpecificationList.forEach(
        (element) => {
          this.formModel.saleOrderList[index].productQuantity += Number(
            element.productionQuantity
          );
        }
      );
      this.formModel.saleOrderList[index].dataQuantity = Math.round(
        this.formModel.saleOrderList[index].productQuantity * 1.1
      );

      this.formModel.saleOrderList[index].dataQuantity = JSON.parse(
        this.formModel.saleOrderList[index].dataQuantity.toFixed(4)
      );
      if (type != "delete") {
        if (
          rowIndex ==
          this.formModel.saleOrderList[index].orderProductSpecificationList
            .length -
            1
        ) {
          this.formModel.saleOrderList[
            index
          ].orderProductSpecificationList.push({
            orderProductSpecificationID: 0,
            orderProductSpecificationCode: "",
            productSpecificationCode: "",
            productCode:
              this.formModel.saleOrderList[index].orderProductSpecificationList[
                rowIndex
              ].productCode,
            productSpecificationNumber: "",
            productSpecificationName: "",
            isDisable: 0,
            remark: "",
            productionQuantity: 0,
          });
        }
      }

      

      //计算阶梯价格
      var saleOrder = this.formModel.saleOrderList[index];
      try {
        saleOrder.productSteppedPriceInfoList.forEach((item, i) => {
          if (saleOrder.productQuantity < item.productSteppedCount) {
            if (i != 0) {
              saleOrder.orderProduct.productPrice =
                saleOrder.productSteppedPriceInfoList[
                  i - 1
                ].productSteppedPrice;
              // this.formModel.discountAmount =
              //   saleOrder.productSteppedPriceInfoList[i - 1].discount;
            } else {
              saleOrder.orderProduct.productPrice = saleOrder.initMoney;
            }
            throw new Error();
          } else if (i == saleOrder.productSteppedPriceInfoList.length - 1) {
            saleOrder.orderProduct.productPrice = item.productSteppedPrice;
            // this.formModel.discountAmount = item.discount;
          }
        });
      } catch (error) {}

      // this.formModel.discountType = 4;
      this.calculationDiscount();

      this.formModel.saleOrderList[index].totalAmount = JSON.parse(
        (
          this.formModel.saleOrderList[index].orderProduct.productPrice *
          this.formModel.saleOrderList[index].productQuantity
        ).toFixed(4)
      );
      this.getOrderPrice();
    },

    //重新计算单价
    handleRecalculate(index){
      this.formModel.saleOrderList.forEach((x)=>{
        x.productQuantity = 0;
        x.orderProductSpecificationList.forEach(
        (element) => {
          x.productQuantity += Number(
            element.productionQuantity
          );
        }
      );
        x.dataQuantity = Math.round(
          x.productQuantity * 1.1
        );

        x.dataQuantity = JSON.parse(
          x.dataQuantity.toFixed(4)
        );
        
      //计算阶梯价格
        try {
        x.productSteppedPriceInfoList.forEach((item, i) => {
          if (x.productQuantity < item.productSteppedCount) {
            if (i != 0) {
              x.orderProduct.productPrice =
                x.productSteppedPriceInfoList[
                  i - 1
                ].productSteppedPrice;
            } else {
              x.orderProduct.productPrice = x.initMoney;
            }
            throw new Error();
          } else if (i == x.productSteppedPriceInfoList.length - 1) {
            x.orderProduct.productPrice = item.productSteppedPrice;
          }
        });
      } catch (error) {}

      this.calculationDiscount();

      x.totalAmount = JSON.parse(
        (
          x.orderProduct.productPrice *
          x.productQuantity
        ).toFixed(4)
      );
      this.getOrderPrice();
      })
      // this.formModel.saleOrderList[index].productQuantity = 0;
      // this.formModel.saleOrderList[index].orderProductSpecificationList.forEach(
      //   (element) => {
      //     this.formModel.saleOrderList[index].productQuantity += Number(
      //       element.productionQuantity
      //     );
      //   }
      // );
      // this.formModel.saleOrderList[index].dataQuantity = Math.round(
      //   this.formModel.saleOrderList[index].productQuantity * 1.1
      // );

      // this.formModel.saleOrderList[index].dataQuantity = JSON.parse(
      //   this.formModel.saleOrderList[index].dataQuantity.toFixed(4)
      // );

      //计算阶梯价格
      // var saleOrder = this.formModel.saleOrderList[index];
      // try {
      //   saleOrder.productSteppedPriceInfoList.forEach((item, i) => {
      //     if (saleOrder.productQuantity < item.productSteppedCount) {
      //       if (i != 0) {
      //         saleOrder.orderProduct.productPrice =
      //           saleOrder.productSteppedPriceInfoList[
      //             i - 1
      //           ].productSteppedPrice;
      //       } else {
      //         saleOrder.orderProduct.productPrice = saleOrder.initMoney;
      //       }
      //       throw new Error();
      //     } else if (i == saleOrder.productSteppedPriceInfoList.length - 1) {
      //       saleOrder.orderProduct.productPrice = item.productSteppedPrice;
      //     }
      //   });
      // } catch (error) {}

      // this.formModel.discountType = 4;
      // this.calculationDiscount();

      // this.formModel.saleOrderList[index].totalAmount = JSON.parse(
      //   (
      //     this.formModel.saleOrderList[index].orderProduct.productPrice *
      //     this.formModel.saleOrderList[index].productQuantity
      //   ).toFixed(4)
      // );
      // this.getOrderPrice();
    },

    //下载模板
    handleDownload() {
      const elink = document.createElement("a");
      elink.download = "型号导入模板.xlsx"; //下载文件名称,
      elink.style.display = "none";
      elink.href = "./型号导入模板.xlsx?version=" + formatDate();
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    },

    // 上传文件
    myUpload(code, index, e) {
      this.loading = true;
      let type = e.file.name.split(".");
      if (type[type.length - 1] != "xlsx" && type[type.length - 1] != "xls") {
        this.$message.warning("请上传excel类型文件");
        this.loading = false;
        return;
      }
      const file = e.file;
      var formData = new FormData();
      formData.append("productCode", code);
      formData.append("file", file);
      this.$api.business
        .ImportProductSpecification(formData)
        .then((res) => {
          let arr = [
            ...res,
            ...this.formModel.saleOrderList[index]
              .orderProductSpecificationList,
          ];
          arr.forEach((x, i) => {
            x.rowKey = i;
          });
          this.$set(
            this.formModel.saleOrderList[index],
            "orderProductSpecificationList",
            arr
          );

          this.formModel.saleOrderList[index].productQuantity = 0;
          this.formModel.saleOrderList[
            index
          ].orderProductSpecificationList.forEach((element) => {
            this.formModel.saleOrderList[index].productQuantity += Number(
              element.productionQuantity
            );
          });
          this.formModel.saleOrderList[index].dataQuantity = Math.round(
            this.formModel.saleOrderList[index].productQuantity * 1.1
          );

          this.formModel.saleOrderList[index].dataQuantity = JSON.parse(
            this.formModel.saleOrderList[index].dataQuantity.toFixed(4)
          );
          // this.getOrderPrice();

          this.formModel.saleOrderList[index].totalAmount = JSON.parse(
            (
              this.formModel.saleOrderList[index].orderProduct.productPrice *
              this.formModel.saleOrderList[index].productQuantity
            ).toFixed(4)
          );
          this.getOrderPrice();
          console.log(this.formModel.saleOrderList[index].productQuantity);
          this.$message.success("上传成功");
          this.$forceUpdate();
        })
        .catch((err) => {});
    },

    //批量上传合同
    handleBatchContractUpload(e){
      this.loading = true;
      let type = e.file.name.split(".");
      if (
        type[type.length - 1] != "doc" &&
        type[type.length - 1] != "docx" &&
        type[type.length - 1] != "pdf"
      ) {
        this.$message.warning("请上传word或pdf类型文件");
        this.loading = false;
        return;
      }
      const file = e.file;
      var formData = new FormData();
      formData.append("file", file);
      this.$api.common
        .UploadSingleFile(formData)
        .then((res) => {
          this.$message.success('上传成功！')
          this.formModel.saleOrderList.forEach((item,index)=>{
            item.contractFile = res.fileUrl;
            item.contractName = res.originalName
          })
        })
        .catch((err) => {});
    },

    //上传合同
    handleContractUpload(index, e) {
      console.log(e);
      this.loading = true;
      let type = e.file.name.split(".");
      if (
        type[type.length - 1] != "doc" &&
        type[type.length - 1] != "docx" &&
        type[type.length - 1] != "pdf"
      ) {
        this.$message.warning("请上传word或pdf类型文件");
        this.loading = false;
        return;
      }
      const file = e.file;
      var formData = new FormData();
      formData.append("file", file);
      this.$api.common
        .UploadSingleFile(formData)
        .then((res) => {
          this.formModel.saleOrderList[index].contractFile = res.fileUrl;
          this.formModel.saleOrderList[index].contractName = res.originalName;
        })
        .catch((err) => {});
    },

    //获取订单金额
    getOrderPrice() {
      this.formModel.orderTotalAmount = 0;
      this.formModel.saleOrderList.forEach((item) => {
        this.formModel.orderTotalAmount += Number(item.totalAmount);
      });
      this.formModel.orderTotalAmount = JSON.parse(
        this.formModel.orderTotalAmount.toFixed(4)
      );
      this.formModel.actualAmount = this.formModel.orderTotalAmount;
      this.calculationDiscount();
    },

    //保存
    handleSave(type) {
      this.$refs.formModels.validate((valid) => {
        if (valid) {
          let state = true;
          let isDataComeFrom = true;
          let isPage = true
          let isDeliveryDate = true
          let arr = JSON.parse(JSON.stringify(this.formModel.saleOrderList));
          arr.forEach((x, i) => {
            if (x.dataComeFrom === "") {
              isDataComeFrom = false;
            }
            console.log(x)
            if(!x.productLayout || x.productLayout === ""){
              isPage = false
            }

            if(!x.deliveryDate){
              isDeliveryDate = false
            }
          });

          if (!isDataComeFrom) {
            this.$message.warning("请选择数据来源");
            return;
          }

          if(!isDeliveryDate){
            this.$message.warning("请选择交货日期");
            return;
          }

          if(!isPage){
            this.$message.warning("请选择产品版面");
            return;
          }

          arr.forEach((x, i) => {
            x.unitPrice = x.orderProduct.productPrice;
            if (x.orderProductSpecificationList.length > 1) {
              x.orderProductSpecificationList.pop();
              x.orderProductSpecificationList.forEach((item, index) => {
                item.productCode = x.productCode;
                if (!item.productSpecificationCode) {
                  state = false;
                }
              });
            }else{
              state = false;
            }
          });

          if (!state) {
            this.$message.warning("请选择并保存型号名称");
            return;
          }


          // this.formModel.saleOrderList.forEach((item)=>{
          //   for (const key in this.batchForm) {
          //     if (!item[key]) {
          //       item[key] = this.batchForm[key]
          //     }
          //   }
          // })


          // console.log(this.formModel)
          // return
          this.$set(this.formModel, "saleOrderList", arr);
          this.isOpenDetail = false;
          if (this.$route.query.type == "add") {
            if (type == "confirm") {
              this.$api.business
                .AddSaleOrderGroup(this.formModel)
                .then((res) => {
                  let obj = {
                    saleOrderGroupCode: res.saleOrderGroupCode,
                    state: 1,
                    reason: "",
                  };
                  this.$api.business
                    .UpdateSaleOrderGroupState(obj)
                    .then((res) => {
                      this.$message.success("保存成功");
                      this.$router.go(-1);
                    });
                });
            } else {
              this.$api.business
                .AddSaleOrderGroup(this.formModel)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.go(-1);
                });
            }
          } else if (this.$route.query.type == "edit") {
            if (type == "confirm") {
              this.$api.business
                .UpdateSaleOrderGroup(this.formModel)
                .then((res) => {
                  let obj = {
                    saleOrderGroupCode: this.formModel.saleOrderGroupCode,
                    state: 1,
                    reason: "",
                  };
                  this.$api.business
                    .UpdateSaleOrderGroupState(obj)
                    .then((res) => {
                      this.$message.success("保存成功");
                      this.$router.go(-1);
                    });
                });
            } else {
              this.$api.business
                .UpdateSaleOrderGroup(this.formModel)
                .then((res) => {
                  this.$message.success("保存成功");
                  this.$router.go(-1);
                });
            }
          }
        }
      });
    },

    //获取详情
    getDetail(id) {
      this.$api.business
        .GetSaleOrderGroupDetail({ saleOrderGroupCode: id })
        .then((res) => {
          this.temModel = JSON.parse(JSON.stringify(res));
          this.formModel = res;
          this.formModel.saleOrderList.forEach((item) => {
            item.initMoney = item.orderProduct.productPrice;
            if (item.orderProductSpecificationList.length > 0) {
              item.orderProductSpecificationList.forEach((k, i) => {
                k.rowKey = i;
              });
            }
            if (item.productSpecificationList.length > 0) {
              item.productSpecificationList.forEach((x, i) => {
                x.label = x.productSpecificationName;
                x.value = x.productSpecificationCode;
              });
              if (this.$route.query.type !== "see") {
                item.orderProductSpecificationList.push({
                  orderProductSpecificationID: 0,
                  orderProductSpecificationCode: "",
                  productSpecificationCode: "",
                  productCode: item.productCode,
                  productSpecificationNumber: "",
                  productSpecificationName: "",
                  isDisable: 0,
                  remark: "",
                  productionQuantity: 0,
                  rowKey: Date.now(),
                });
              }
            }
          });
          console.log(this.formModel.saleOrderList);
        });
    },

    //批量赋值
    batchAssignment(){
      this.formModel.saleOrderList.forEach((item,index)=>{
            for (const key in this.batchForm) {
              if (Object.keys(item).includes(key) && this.batchForm[key]) {
                item[key] = JSON.parse(JSON.stringify(this.batchForm[key]))
              }
              if(key === 'productionQuantity' && this.batchForm[key]){
                item.orderProductSpecificationList[0].productionQuantity = JSON.parse(JSON.stringify(this.batchForm[key]))
              }
            }
          })
          this.batchForm = JSON.parse(JSON.stringify(this.batchFormCopy))
          console.log(this.formModel)
      // console.log(this.batchForm.customerBillNo)
      // this.batchForm.customerBillNo = ''
      // console.log(this.batchForm.customerBillNo)
    },

    //计算折扣
    calculationDiscount() {
      this.formModel.orderTotalAmount = JSON.stringify(
        this.formModel.orderTotalAmount
      );

      if (this.formModel.orderTotalAmount.indexOf(".") > -1) {
        let discountMoney = this.formModel.orderTotalAmount.split(".");
        if (this.formModel.discountType == 0) {
          this.formModel.discountAmount = 0;
          this.formModel.actualAmount = this.formModel.orderTotalAmount;
        } else if (this.formModel.discountType == 1) {
          this.formModel.discountAmount = 0;
          this.formModel.actualAmount = this.formModel.orderTotalAmount;
          if (discountMoney[0].length > 1) {
            console.log(this.formModel.orderTotalAmount);
            this.formModel.discountAmount =
              this.formModel.orderTotalAmount.substring(
                this.formModel.orderTotalAmount.indexOf(".") - 1
              );
            this.formModel.actualAmount =
              Number(this.formModel.orderTotalAmount) -
              Number(this.formModel.discountAmount);
          }
        } else if (this.formModel.discountType == 2) {
          this.formModel.discountAmount = 0;
          this.formModel.actualAmount = this.formModel.orderTotalAmount;
          if (discountMoney[0].length > 1) {
            this.formModel.discountAmount = "0." + discountMoney[1];
            this.formModel.actualAmount = discountMoney[0];
          } else if (
            discountMoney[0].length == 1 &&
            discountMoney[0] > 0 &&
            discountMoney[1].length >= 1
          ) {
            this.formModel.discountAmount = "0." + discountMoney[1];
            this.formModel.actualAmount = discountMoney[0];
          }
        } else if (this.formModel.discountType == 3) {
          this.formModel.discountAmount = 0;
          this.formModel.actualAmount = this.formModel.orderTotalAmount;
          if (discountMoney[1].length >= 2) {
            this.formModel.discountAmount =
              "0.0" +
              this.formModel.orderTotalAmount.substring(
                this.formModel.orderTotalAmount.indexOf(".") + 2
              );
            this.formModel.actualAmount =
              Number(this.formModel.orderTotalAmount) -
              Number(this.formModel.discountAmount);
          }
        } else {
          this.formModel.actualAmount =
            Number(this.formModel.orderTotalAmount) -
            Number(this.formModel.discountAmount);
          this.formModel.actualAmount = JSON.parse(
            this.formModel.actualAmount.toFixed(4)
          );
        }
      } else if (this.formModel.discountType == 4) {
        this.formModel.actualAmount =
          Number(this.formModel.orderTotalAmount) -
          Number(this.formModel.discountAmount);
        this.formModel.actualAmount = JSON.parse(
          this.formModel.actualAmount.toFixed(4)
        );
      } else {
        this.formModel.discountAmount = 0;
        this.formModel.actualAmount = this.formModel.orderTotalAmount;
      }

      this.formModel.orderTotalAmount = JSON.parse(
        this.formModel.orderTotalAmount
      );
    },

    //自定义折扣金额
    handleBlurDiscount() {
      this.formModel.actualAmount =
        this.formModel.orderTotalAmount - this.formModel.discountAmount;
      this.formModel.actualAmount = JSON.parse(
        this.formModel.actualAmount.toFixed(4)
      );
    },

    //保存成品型号
    handleSaveProductModel(index, rowIndex, event) {
      this.productModelForm.productCode =
        this.formModel.saleOrderList[index].productCode;
      this.productModelForm.productSpecificationName = event;
      this.$api.business
        .SaveProductSpecification(this.productModelForm)
        .then(() => {
          const parmas = {
            queryBy: 0,
            queryValue: this.formModel.saleOrderList[index].productCode,
          };
          this.$api.business
            .GetSingleProductByProductCode(parmas)
            .then((res) => {
              res.productSpecificationList.forEach((item) => {
                item.label = item.productSpecificationName;
                item.value = item.productSpecificationCode;
              });
              this.formModel.saleOrderList[index].productSpecificationList =
                res.productSpecificationList;
              this.formModel.saleOrderList[
                index
              ].productSpecificationList.forEach((x) => {
                if (x.productSpecificationName == event) {
                  this.formModel.saleOrderList[
                    index
                  ].orderProductSpecificationList[
                    rowIndex
                  ].productSpecificationCode = x.productSpecificationCode;
                  this.formModel.saleOrderList[
                    index
                  ].orderProductSpecificationList[
                    rowIndex
                  ].productSpecificationNumber = x.productSpecificationNumber;
                  console.log(this.formModel.saleOrderList[index]);
                }
              });
            });
          this.$message.success("保存成功");
        })
        .catch(() => {});
    },

    //选择型号名称
    productSpecificationChange(row, index, rowIndex, event) {
      let name = "";
      let num = "";
      let stockQuantity = "";
      this.formModel.saleOrderList[index].productSpecificationList.forEach(
        (item) => {
          if (item.productSpecificationCode == event) {
            name = item.productSpecificationName;
            num = item.productSpecificationNumber;
            stockQuantity = item.stockQuantity;
          }
        }
      );
      row.productSpecificationName = name;
      row.productSpecificationNumber = num;
      if(stockQuantity<0){
        row.stockQuantity = 0;
      }else{
        row.stockQuantity = stockQuantity
      }
      // row.productSpecificationName = event
      if (this.$route.query.type != "see") {
        if (
          rowIndex ==
          this.formModel.saleOrderList[index].orderProductSpecificationList
            .length -
            1
        ) {
          this.formModel.saleOrderList[
            index
          ].orderProductSpecificationList.push({
            orderProductSpecificationID: 0,
            orderProductSpecificationCode: "",
            productSpecificationCode: "",
            productCode:
              this.formModel.saleOrderList[index].orderProductSpecificationList[
                rowIndex
              ].productCode,
            productSpecificationNumber: "",
            productSpecificationName: "",
            isDisable: 0,
            remark: "",
            productionQuantity: 0,
          });
        }
      }
      this.formModel.saleOrderList[index].orderProductSpecificationList.forEach(
        (x, i) => {
          this.$set(x, "rowKey", "key" + i);
        }
      );
    },

    // 获取产品列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.ProductManager,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        res.forEach((item) => {
          if (item.columnName == "是否禁用" || item.columnName == "客户名称") {
            item.isCanSearch = false;
          }
        });
        this.tableHead = res.filter((x) => {
          return x.isCanSearch == true;
        });
        this.search.queryDataBaseFiled = this.tableHead[0].columnCode;
      });
    },

    //选择产品
    handleShowProductList() {
      if (this.formModel.customerCode == "") {
        this.$message.warning("请先选择客户名称");
        return;
      } else {
        //获取产品列表
        this.getProductList();

        //获取产品列表表头
        this.getTableHead();

        this.isShowProductModel = true;
      }
    },

    // 获取产品列表
    getProductList() {
      this.search.customerCode = this.formModel.customerCode;
      const parmas = this.search;
      this.listLoading = true;
      this.$api.business
        .GetPageProductList(parmas)
        .then((res) => {
          this.productList = res.list;
          this.search.total = res.totalCount;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },

    //产品列表搜索
    handleProductSearch() {
      this.search.pageIndex = 1;
      this.getProductList();
    },
    // 返回
    handleBack() {
      this.$router.go(-1);
    },
  },
};
</script>
        <style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
  padding: 0 16px;
  height: 40px;
}

.list-item {
  padding: 8px;
  border: 1px solid #e6e6e6;
  position: relative;
  cursor: pointer;
}

.list-item:hover {
  border: 1px solid #3967ff;
}

.product_list_img {
  margin-bottom: 8px;
  height: 220px;
}

.query_region {
  margin-bottom: 10px;
  margin-left: 10px;
  width: 500px;
}

::v-deep .el-input-group__prepend div.el-select .el-input__inner {
  width: 140px !important;
}

.product_list_img img {
  width: 100%;
  height: 100%;
}

.product_list_info h3 {
  margin-bottom: 8px;
  overflow: hidden;
  /*文本不会换行*/
  white-space: nowrap;
  /*当文本溢出包含元素时，以省略号表示超出的文本*/
  text-overflow: ellipsis;
}
.product_list_info p {
  padding-bottom: 8px;
  font-size: 13px;
  color: #999aaa;
}

.product_list_info p span {
  color: #333;
}

.key {
  color: #a6a7c8;
  font-size: 13px;
}

.val {
  color: #333;
  font-size: 13px;
}

.product_lists {
  height: 600px;
  overflow-y: auto;
}

.list_item {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
}

.content {
  display: flex;
}

.product_item_info {
  display: flex;
  .product_img {
    margin-right: 8px;
    width: 140px;
  }
  img {
    width: 100%;
    height: 100%;
  }
  p {
    padding-bottom: 8px;
  }
  .product_detail {
    flex: 1;
  }
}

.content_left {
  padding: 16px;
  flex: 1;
  border-right: 1px solid #e6e6e6;
}

.content_right {
  padding: 16px;
  width: 460px;
}

.detail_head {
  margin-bottom: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

.el-form-item .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #fafafa;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff !important;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  line-height: 146px;
  text-align: center;
}
::v-deep .avatar {
  width: 146px;
  height: 146px;
  display: block;
}

::v-deep .el-empty {
  padding: 0;
}

.img_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.border_line {
  border-bottom: 1px solid #e6e6e6;
}

.tips {
  margin-top: 8px;
  display: inline-block;
  font-size: 12px;
  color: #999aaa;
}

.d_mainCenter {
  overflow-y: auto;
  background: #fff;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
